<template>
	<up-navbar bgColor="#fff">
		<template #left>
			<view class="u-flex u-flex-items-center u-flex-center ">
				<image class="nav-img" src="@/static/index.png" mode="heightFix"></image>
			</view>
		</template>
	</up-navbar>
	<view class="area-box" :style="{
		padding: `${bottom + 16}px 12px 0`}">
		<up-search bgColor="#F7F7F7" disabled placeholder="大家都在搜 王氏大闸蟹" :showAction="false" shape="square" height="44"
			@click="toSearch"></up-search>
		<view class="u-m-t-40">
			<up-swiper radius="0" height="160" :list="bannerList"></up-swiper>
		</view>
		<view class="u-m-t-60" v-if="menuList.length > 0">
			<up-grid :border="false" col="5">
				<up-grid-item v-for="menu in menuList" :key="menu.id" @click="toPage(menu)">
					<view class="u-flex u-flex-items-center u-flex-column">
						<image :src="menu.icon" style="width: 40px;height: 40px;" mode="widthFix"></image>
						<text class="u-m-t-12 f-s-12">{{menu.name}}</text>
					</view>
				</up-grid-item>
			</up-grid>
		</view>
		<!-- <ad class="u-m-t-60" unit-id="adunit-9a44cf73216abe53"></ad> -->
		<view class="u-m-t-40">
			<up-tabs :list="brandList" @click="tabsClick" lineColor="#000" lineWidth="0" :activeStyle="{
			    color: '#000000',
			    fontWeight: 'bold',
				fontSize: '18px',
			}" :inactiveStyle="{
			    color: '#464646',
				fontSize: '14px',
			}"></up-tabs>
			<view class="goods-box u-m-t-48">
				<block v-if="currentTab === 0">
					<GoodsItem v-for="goods in hotGoodsList" :goods="goods"></GoodsItem>
				</block>
				<block v-else>
					<GoodsItem v-for="goods in brandsGoodsList" :goods="goods"></GoodsItem>
				</block>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue';
	import {
		getIndexData
	} from '@/api/index.js';
	import {
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import CategoryApi from '@/api/category.js';
	import Navbar from '@/components/Navbar.vue';
	import GoodsItem from '@/components/GoodsItem.vue'
	import Utils from '@/utils/common.js';
	
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	const bannerList = ref([])
	const brandList = ref([])
	const hotGoodsList = ref([])
	const brandsGoodsList = ref([])
	const menuList = ref([])
	const currentTab = ref(0)

	onShareAppMessage(() => {})

	const getData = () => {
		getIndexData().then(res => {
			bannerList.value = res.data.bannerList.map(banner => banner.imgUrl)
			brandList.value = [{name: '热门商品'},...res.data.brandList]
			hotGoodsList.value = res.data.hotGoodsList
			menuList.value = res.data.menuList
		})
	}
	
	const tabsClick = ({id,index})=>{
		currentTab.value = index
		if(index === 0){
			return
		}
		CategoryApi.getGoodsByBrandId(id).then(res => {
			brandsGoodsList.value = res.data
		})
	}

	const toPage = ({
		path
	}) => {
		if (!path) {
			Utils.toast('敬请期待');
			return
		}
		uni.navigateTo({
			url: path
		})
	}
	getData()
</script>
<style scoped lang="scss">
	.nav-img {
		height: 28px;
		width: auto;
	}

	.goods-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20px;
		padding: 0 10px 20px;
	}
	
</style>